<template>
  <el-dialog :title="title" :width="width"
             :visible.sync="isShowVisible"
             center :close-on-click-modal="false"
             :before-close="() => $emit('close')">
    <el-card v-loading="isLoading">
      <el-form label-width="105px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="申请事项" v-if="!detail" name="first">
<!--            <el-row>-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="请假人员:">-->
<!--                  <span></span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="登录用户:">-->
<!--                  <span></span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="请假类型:">-->
<!--                  <span></span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="请假时长:">-->
<!--                  <span></span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row>-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="开始时间:">-->
<!--                  <span></span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <el-form-item label="结束时间:">-->
<!--                  <span></span>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-form-item label="请假事由:">-->
<!--              <span></span>-->
<!--            </el-form-item>-->
            <el-form-item label="审批意见:" required v-if="!detail">
              <vue-editor v-model="approveNote"></vue-editor>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="审批过程" name="second">
            <el-table :data="formData.approveHistoryList" border>
              <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
              <el-table-column label="任务节点" prop="approveOperate" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.approveOperate === 0">申请开始</span>
                  <span v-if="scope.row.approveOperate === 1">通过</span>
                  <span v-if="scope.row.approveOperate === 2">未通过</span>
                  <span v-if="scope.row.approveOperate === 3">重新申请</span>
                  <span v-if="scope.row.approveOperate === 4">取消申请</span>
                </template>
              </el-table-column>
              <el-table-column label="办理人" prop="approveUserName" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="审批开始时间" prop="approveTime" align="center" show-overflow-tooltip></el-table-column>
<!--              <el-table-column label="审批结束时间" prop="endTime" align="center" show-overflow-tooltip></el-table-column>-->
              <el-table-column label="审批意见" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div v-html="scope.row.approveNote"></div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="流程图" name="three">
            <div>
              <img :src="formData.processImg" alt="">
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <div v-if="!detail">
        <el-button type="primary" @click="doneTask(1, '通过')">通过</el-button>
        <el-button type="primary" @click="doneTask(2, '未通过')">未通过</el-button>
        <el-button type="primary" @click="doneTask(3, '重新申请')">重新申请</el-button>
        <el-button type="primary" @click="doneTask(4, '取消申请')">取消申请</el-button>
      </div>
      <el-button v-if="detail" type="primary" @click="() => $emit('close')">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import NeedToTaskApi from '@/api/taskManage/NeedToTaskApi'
  import { VueEditor } from 'vue2-editor'
  export default {
    name: 'handle',
    components:{
      VueEditor
    },
    props:{
      width:{
        type:String,
        default:'60vw'
      },
      processInstanceId:{
        type:String,
      },
      detail:{
        type:Boolean,
        default: false
      },
    },
    data(){
      return{
        title:this.detail ? '流程信息' : '办理',
        isShowVisible:true,
        isLoading:false,
        formData:{},
        activeName:this.detail ? 'second' : 'first',
        approveNote:'',
      }
    },
    created() {
      let http = new NeedToTaskApi()
      http.viewTaskDetail({processInstanceId: this.processInstanceId}).then(res => {
        this.formData = res.data
      })
    },
    methods:{
      doneTask(type, text){
        if(this.approveNote){
          this.$confirm(`您确定要${text}吗?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: `正在${text}.....`,
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let http = new NeedToTaskApi()
            let data = {
              approveNote: this.approveNote,
              approveOperate: type,
              processInstanceId: this.processInstanceId,
            }
            http.doneTask(data).then(res => {
              loading.close()
              if(res.code === 200){
                this.$message.success(`${text}成功！`)
                this.$emit('close')
              }else{
                this.$message.error(`${text}失败！`)
              }
            }).catch(err => {
              loading.close()
            })
          }).catch(() => {
            this.$message.info(`已取消${text}`)
          })
        }else {
          this.$message.warning('请填写审批意见!')
        }
      },
    },
  }
</script>

<style scoped>

</style>
